<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <script src="/js/jquery.min.js"></script>
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.js"></script>
</head>
<body>
    <button id='test'>button</button>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">
    $(function(){

        $('#test').click(function(){
            $.post('/admin/api/device/chart', {device_id:1}, function (data) {
                // console.log(data.data);
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption(option = {
                        title: {
                            text: '水机纯水TDS'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        xAxis: {
                            data: data.data[0]
                        },
                        yAxis: {
                            splitLine: {
                                show: false
                            }
                        },
                        toolbox: {
                            left: 'center',
                            feature: {
                                dataZoom: {
                                    yAxisIndex: 'none'
                                },
                                restore: {},
                                saveAsImage: {}
                            }
                        },
                        dataZoom: [{
                            startValue: '2017-02-01 00:00:00'
                        }, {
                            type: 'inside'
                        }],
                        visualMap: {
                            top: 10,
                            right: 10,
                            pieces: [{
                                gt: 0,
                                lte: 10,
                                color: '#096'
                            }, {
                                gt: 10,
                                lte: 30,
                                color: '#ffde33'
                            }, {
                                gt: 30,
                                lte: 50,
                                color: '#ff9933'
                            }, {
                                gt: 50,
                                lte: 80,
                                color: '#cc0033'
                            }, {
                                gt: 80,
                                lte: 100,
                                color: '#660099'
                            }, {
                                gt: 100,
                                color: '#7e0023'
                            }],
                            outOfRange: {
                                color: '#999'
                            }
                        },
                        series: {
                            name: 'TDS2',
                            type: 'line',
                            data: data.data[1],
                            markLine: {
                                silent: true,
                                data: [{
                                    yAxis: 10
                                }, {
                                    yAxis: 30
                                }, {
                                    yAxis: 50
                                }, {
                                    yAxis: 80
                                }, {
                                    yAxis: 100
                                }]
                            }
                        }
                });
            });
        });

    });
    </script>
</body>
</html>